<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 航空旅客付费选座意愿识别系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --neon-pink: #ff6ec7;
            --neon-blue: #6e56cf;
            --dark-bg: #0f172a;
            --card-bg: rgba(15, 23, 42, 0.85);
        }
        
        body {
            font-family: 'Poppins', 'Noto Sans SC', sans-serif;
            background-color: var(--dark-bg);
            color: white;
            padding-bottom: 3rem;
            overflow-x: hidden;
        }
        
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }
        
        .navbar {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 10;
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .navbar-brand i {
            text-shadow: 0 0 10px var(--neon-pink);
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.7);
            margin: 0 10px;
            font-weight: 500;
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            transition: width 0.3s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: white;
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        
        .user-menu {
            position: relative;
            display: inline-block;
        }
        
        .user-menu .dropdown-menu {
            position: absolute;
            right: 0;
            top: 100%;
            background: var(--card-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            min-width: 180px;
            padding: 0.5rem 0;
            display: none;
            z-index: 100;
        }
        
        .user-menu:hover .dropdown-menu {
            display: block;
        }
        
        .dropdown-item {
            color: rgba(255, 255, 255, 0.8);
            padding: 0.75rem 1.5rem;
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .hero-section {
            padding: 6rem 0;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        
        .hero-title {
            font-weight: 800;
            font-size: 3rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, white, #ccc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
            max-width: 700px;
            margin: 0 auto 2.5rem;
            line-height: 1.8;
        }
        
        .btn {
            padding: 0.8rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            margin: 0 0.5rem;
        }
        
        .btn-gradient {
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            color: white;
            box-shadow: 0 0 15px rgba(255, 110, 199, 0.3);
        }
        
        .btn-gradient:hover {
            box-shadow: 0 0 25px rgba(255, 110, 199, 0.5);
            transform: translateY(-3px);
            color: white;
        }
        
        .btn-outline {
            background: transparent;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
            color: white;
        }
        
        .features-section {
            padding: 4rem 0;
            position: relative;
            z-index: 1;
        }
        
        .section-title {
            text-align: center;
            font-weight: 800;
            font-size: 2.2rem;
            margin-bottom: 4rem;
            background: linear-gradient(135deg, white, #ccc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .feature-card {
            background: var(--card-bg);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 2.5rem 1.5rem;
            text-align: center;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .feature-card:hover::before {
            transform: scaleX(1);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .feature-title {
            font-weight: 700;
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }
        
        .feature-desc {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
        }
        
        .model-status {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 2rem;
            margin: 2rem 0;
            border: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
        }
        
        .status-badge {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        
        .status-ready {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .status-not-ready {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        .action-buttons {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        
        .alert {
            border-radius: 8px;
            padding: 1.2rem;
            margin-bottom: 2rem;
            border: none;
            position: relative;
            z-index: 1;
        }
        
        .alert-success {
            background: rgba(16, 185, 129, 0.2);
            color: #a7f3d0;
        }
        
        .alert-warning {
            background: rgba(245, 158, 11, 0.2);
            color: #fde68a;
        }
        
        footer {
            text-align: center;
            padding: 2rem 0;
            margin-top: 4rem;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            position: relative;
            z-index: 1;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .btn {
                display: block;
                margin: 1rem auto;
                width: 80%;
            }
            
            .action-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div id="particles-js"></div>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-plane"></i>
                <span>选座预测系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
                <i class="fa fa-bars text-white"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarMenu">
                <ul class="navbar-nav ms-auto">
                    {% if current_user %}
                        <li class="nav-item"><a class="nav-link active" href="/">首页</a></li>
                        <li class="nav-item"><a class="nav-link" href="/train">模型训练</a></li>
                        <li class="nav-item"><a class="nav-link" href="/predict">旅客预测</a></li>
                        <li class="nav-item"><a class="nav-link" href="/analysis">数据分析</a></li>
                        <li class="nav-item user-menu">
                            <a class="nav-link" href="#">
                                <i class="fa fa-user-circle"></i> {{ current_user }}
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#"><i class="fa fa-cog me-2"></i>设置</a>
                                <a class="dropdown-item" href="{{ url_for('logout') }}"><i class="fa fa-sign-out me-2"></i>退出登录</a>
                            </div>
                        </li>
                    {% else %}
                        <li class="nav-item"><a class="nav-link active" href="/">首页</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">模型训练</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">旅客预测</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">数据分析</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">登录</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ url_for('register') }}">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container">
        <!-- 状态提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, msg in messages %}
                    <div class="alert alert-{{ category }}">
                        <i class="fa fa-{{ 'check-circle' if category == 'success' else 'info-circle' }}"></i> {{ msg }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <!-- 英雄区域 -->
        <div class="hero-section">
            <h1 class="hero-title">航空旅客付费选座意愿识别系统</h1>
            <p class="hero-subtitle">
                基于机器学习的智能预测平台，通过分析会员等级、出行目的和航线类型等多维数据，
                精准识别旅客付费选座意愿，助力航空公司优化服务与收益。
            </p>
            <div>
                {% if current_user %}
                    <a href="{{ url_for('train') }}" class="btn btn-gradient">
                        <i class="fa fa-cogs"></i> 开始使用
                    </a>
                    <a href="{{ url_for('analysis') }}" class="btn btn-outline">
                        <i class="fa fa-bar-chart"></i> 查看分析
                    </a>
                {% else %}
                    <a href="{{ url_for('login') }}" class="btn btn-gradient">
                        <i class="fa fa-sign-in"></i> 登录系统
                    </a>
                    <a href="{{ url_for('register') }}" class="btn btn-outline">
                        <i class="fa fa-user-plus"></i> 免费注册
                    </a>
                {% endif %}
            </div>
        </div>
        
        <!-- 模型状态 -->
        {% if current_user %}
            <div class="model-status">
                <h3>当前模型状态</h3>
                {% if model_exists %}
                    <div class="status-badge status-ready">
                        <i class="fa fa-check-circle me-2"></i>已存在训练好的模型
                    </div>
                    <p>您可以直接使用现有模型进行预测分析，或重新训练新模型</p>
                    <div class="action-buttons">
                        <a href="{{ url_for('predict') }}" class="btn btn-gradient">
                            <i class="fa fa-line-chart"></i> 开始预测
                        </a>
                        <a href="{{ url_for('train') }}" class="btn btn-outline">
                            <i class="fa fa-refresh"></i> 重新训练
                        </a>
                        <button type="button" class="btn btn-outline" data-bs-toggle="modal" data-bs-target="#deleteModelModal">
                            <i class="fa fa-trash"></i> 删除模型
                        </button>
                    </div>
                {% else %}
                    <div class="status-badge status-not-ready">
                        <i class="fa fa-exclamation-circle me-2"></i>尚未训练模型
                    </div>
                    <p>请先上传训练数据并训练模型，之后才能进行预测分析</p>
                    <div class="action-buttons">
                        <a href="{{ url_for('train') }}" class="btn btn-gradient">
                            <i class="fa fa-cogs"></i> 训练模型
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}
        
        <!-- 功能特点 -->
        <div class="features-section">
            <h2 class="section-title">系统功能</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <h3 class="feature-title">智能模型训练</h3>
                        <p class="feature-desc">
                            上传旅客数据，系统自动训练预测模型，支持模型保存与更新，
                            无需重复训练，提高工作效率。
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <h3 class="feature-title">精准付费预测</h3>
                        <p class="feature-desc">
                            基于训练好的模型，快速预测旅客付费选座意愿，
                            提供可视化结果与详细数据报告，支持结果下载。
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fa fa-pie-chart"></i>
                        </div>
                        <h3 class="feature-title">多维数据分析</h3>
                        <p class="feature-desc">
                            从会员等级、出行目的、航线类型等多维度分析旅客行为，
                            提供数据洞察与可落地的营销策略建议。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除模型确认弹窗 -->
    <div class="modal fade" id="deleteModelModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); color: white;">
                <div class="modal-header border-bottom border-white/10">
                    <h5 class="modal-title">确认删除模型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1);"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除当前训练好的模型吗？此操作不可撤销，删除后需要重新训练模型才能进行预测。</p>
                </div>
                <div class="modal-footer border-top border-white/10">
                    <button type="button" class="btn btn-outline" data-bs-dismiss="modal">取消</button>
                    <form method="post" action="{{ url_for('delete_model') }}">
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2023 航空旅客付费选座意愿识别系统 | 数据驱动决策支持</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // 粒子背景配置
        particlesJS("particles-js", {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#ff6ec7" },
                shape: { type: "circle" },
                opacity: { 
                    value: 0.5, 
                    random: true, 
                    anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } 
                },
                size: { 
                    value: 3, 
                    random: true, 
                    anim: { enable: true, speed: 2, size_min: 0.1, sync: false } 
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#6e56cf",
                    opacity: 0.2,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 1,
                    direction: "none",
                    random: true,
                    straight: false,
                    out_mode: "out",
                    bounce: false
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "grab" },
                    onclick: { enable: true, mode: "push" },
                    resize: true
                },
                modes: {
                    grab: { distance: 140, line_linked: { opacity: 0.5 } },
                    push: { particles_nb: 4 }
                }
            },
            retina_detect: true
        });
    </script>
</body>
</html>